<template>
  <div>
    <!-- 导航区域 -->
    <ul>
       <!-- router-link：声明式导航链接 -->
      <li><router-link to="/home/message/detail?a=1&b=2">message001</router-link></li>
      <!-- 传递params参数:在配置路由的时候，params需要占位 -->
      <li><router-link to="/home/message/detail">message002</router-link></li>
      <!-- 一次传递两个参数：query+params -->
      <li><router-link to="/home/message/detail">message003</router-link></li>

      <li v-for="item in btns" :key="item">
          <button @click="handler(item)">编程式导航{{item}}</button>
      </li>
      
    </ul>
    <!-- 展示区域 -->
    <div>
       <transition>
           <router-view></router-view>
       </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data(){
    return {
       btns:['军事','新闻','游戏']
    }
  },
  methods: {
    //编程式导航按钮的点击事件的回调
    handler(item){
      //编程式导航进行路由跳转
      //写法有三种:第一种字符串
      // this.$router.push("/home/message/detail?a=成龙&b=李连杰");//query参数
      // this.$router.push('/home/message/detail/999');//params参数
      // this.$router.push('/home/message/detail/999?a=666&b=777');//query参数+params参数

      //第二种写法:模板字符串
      // this.$router.push(`/home/message/detail/${999}?a=${'我是三倍的雪'}&b=${'滴滴'}`)


      //第三种写法:对象写法
      this.$router.replace({path:"/home/message/detail",query:{a:item}});//不携带任何参数
      // this.$router.push({path:'/home/message/detail',query:{a:'ak47',b:'an94'}});//携带query参数
      
      //需要注意:如果对象形式，传递params参数，切记不能与path一起使用
      //面试题:编程式导航在路由跳转的时候传递params参数，能否与path结合使用？不能
      // this.$router.push({name:'wangcai',params:{info:'我是祖国的大坏蛋'}});
      // this.$router.push({name:'wangcai',query:{a:1,b:2},params:{info:'我是params参数，需要占位'}});

      //在vue-router（3.xxx）引入promise,当路由传递参数的时候，参数相同，点击多次就会出现这个警告。
      //警告对于你的程序没有任何影响【将来需要解决的】 只有编程式导航才会这样问题，声明式导航没有的！！！！







    }
  }
};
</script>

<style scoped>
   .v-enter{
     transform: rotate(0deg);
   }
   .v-enter-active{
     transition: all .2s linear 0s;
   }
   .v-enter-to{
     transform: rotate(30deg);
   }
</style>
